<template>
  <div class="page">
    <div class="header">
      <el-page-header
        @back="goBack"
        :content="type == '1' ? '目标任务录入' : ''"
      ></el-page-header>
      <el-button
        type="primary"
        style="width:100px;float:right;  position: relative;top: -24px;"
        @click="setSubmit()"
        >提交</el-button
      >
    </div>
    <div class="main">
      <div class="subnav" v-if="type">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>目标任务详情</span>
          </div>
          <div class="text item" v-loading="loadingTop">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="120px"
              class="demo-ruleForm"
              style="overflow: hidden"
            >
              <el-form-item label="目标任务名称" style="width:100%;float:left" prop="subtasksName">
                <el-input
                  type="textarea"
                  :rows="4"
                  v-model="ruleForm.subtasksName"
                  placeholder="请输入内容"
                  style="width:80%"
                  size="medium"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="目标总任务量" style="width:50%;float:left;">
                <el-input
                  v-model="ruleForm.number"
                  style="width:80%"
                ></el-input>
              </el-form-item> -->
             
              <el-form-item label="是否拆分" style="width:50%;float:left;">
                <el-switch v-model="ruleForm.decompose"></el-switch>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <div
          v-if="ruleForm.decompose"
          style="height:400px;overflow:auto;"
          class="roofStyle"
        >
          <el-button
            type="primary"
            style="margin-left:30px;"
            size="medium"
            @click="addZiTask()"
            >添加</el-button
          >
          <!-- <i class="el-icon-plus" @click="addZiTask"></i> -->
          <el-form
            class="addFormSty"
            ref="form"
            :model="form"
            style="width:1000px;"
            label-width="140px"
            v-for="(item, index) in chaifenZiTask"
            :key="index"
          >
            <el-form-item  style="float:left;"  label-width="30px">
              <i class="icon">{{index+1}}</i>
            </el-form-item>
            <el-form-item
              label="子目标任务名称"
              style="float:left;width:32%;margin-bottom:30px;"
            >
              <el-input v-model="item.targetName" size="small"></el-input>
            </el-form-item>
            <el-form-item
              label="子目标总任务量"
              style="float:left;width:60%;margin-bottom:30px;"
            >
              <el-input
                size="small"
                style="width:42%;"
                v-model="item.number"
              ></el-input>
              <i
                class="el-icon-close"
                @click="reductZiTask(index)"
                style="font-size:24px;position:relative;top: 4px;left:10px;color:#f56c6c"
              ></i>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="list" v-loading="loading" v-if="!type">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>目标任务分解 : {{ $route.query.targetName }}</span>
          </div>
          <el-scrollbar
            class="page-component__scroll"
            style="height:100%"
            v-if="!type"
          >
            <div class="center">
              <el-divider content-position="left">任务季度分解</el-divider>
              <div class="focusTop">
                <b>任务量是否分解到季度</b>
                <el-switch
                  v-model="quarterFrom.decompose"
                  active-text="分解"
                  inactive-text="不分解"
                  @change="dataQuarter()"
                >
                </el-switch>
                <b>牵头部门</b>
                <el-cascader
                  v-model="value"
                  size="small"
                  filterable
                  :options="sectionOptions"
                  :props="departmentProp"
                  @change="changeFamily1"
                  ref="departmenref"
                ></el-cascader>
              </div>
              <el-form
                ref="form"
                :model="quarterFrom"
                label-width="100px"
                style="width:1000px;"
              >
                <el-form-item
                  label="第一季度"
                  style="float:left;width:25%;margin-bottom:30px;"
                >
                  <el-input
                    :disabled="!quarterFrom.decompose"
                    size="small"
                    v-model="quarterFrom.oneQuarterNumber"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="第二季度"
                  style="float:left;width:25%;margin-bottom:30px;"
                >
                  <el-input
                    :disabled="!quarterFrom.decompose"
                    size="small"
                    v-model="quarterFrom.twoQuarterNumber"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="第三季度"
                  style="float:left;width:25%;margin-bottom:30px;"
                >
                  <el-input
                    :disabled="!quarterFrom.decompose"
                    size="small"
                    v-model="quarterFrom.threeQuarterNumber"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="全年"
                  style="float:left;width:25%;margin-bottom:30px;"
                >
                  <el-input
                    v-model="quarterFrom.allNumber"
                    size="small"
                  ></el-input>
                </el-form-item>
              </el-form>

              <div class="warp_all">
                <el-divider content-position="left">责任单位分解</el-divider>
              </div>
              <div class="segmentation">
                <b style="padding-left:20px">是否分解到责任单位</b>
                <el-switch
                  v-model="unitSHow"
                  active-text="分解"
                  inactive-text="不分解"
                  :disabled="disableds"
                  @change="unitQuarter()"
                ></el-switch>
              </div>
              <div class="iconBoxSize" v-if="unitSHow">
                <el-button type="primary" size="medium" @click="addList"
                  >添加</el-button
                >
                <!-- <el-button type="primary" size="small" @click="addList">添加</el-button> -->
                <!-- <i class="el-icon-plus" @click="addList"></i> -->
              </div>
              <div
                class="text item"
                style="width:1000px;overflow:auto"
                v-if="unitSHow"
              >
                <div
                  class="selectList"
                  v-for="(item, index) in subtaskDeptTasks"
                  :key="index"
                >
                  <i
                    class="el-icon-close"
                    style="color:#F56C6C;"
                    @click="deleteList(index)"
                  ></i>
                  <span>
                    <b>责任单位类别</b>
                    <el-select
                      v-model="item.type"
                      size="small"
                      style="width:50%"
                      placeholder="请选择"
                      filterable
                      @change="selectType(index)"
                    >
                      <el-option
                        v-for="item in countyLIstanbul"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </span>
                  <span>
                    <b>责任单位</b>
                    <el-select
                      v-model="item.departmentId"
                      size="small"
                      style="width:50%"
                      filterable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="o in item.typesList"
                        :key="o.id"
                        :label="o.name"
                        :value="o.id"
                      ></el-option>
                    </el-select>
                  </span>
                  <span>
                    <b style="width:150px;">任务量是否分解到季度</b>
                    <el-switch
                      v-model="item.decompose"
                      active-text="分解"
                      inactive-text="不分解"
                      @change="dataQuarterbottom(index)"
                    >
                    </el-switch>
                  </span>
                  <ul class="quarterNum">
                    <li>
                      <b>第一季度</b>
                      <span>
                        <i>任务量</i>
                        <el-input
                          placeholder="请输入分配任务量"
                          v-model="item.oneQuarterNumber"
                          clearable
                          :disabled="!item.decompose"
                          size="mini"
                          class="input"
                        ></el-input>
                      </span>
                      <!-- <span>
                        <i>描述</i>
                        <el-input
                          placeholder="请输入内描述,最长50个字符"
                          v-model="item.oneQuarterDescription"
                          show-word-limit
                          clearable
                          size="small"
                          class="input"
                          maxlength="50"
                        >
                        </el-input>
                      </span>-->
                    </li>
                    <li>
                      <b>第二季度</b>
                      <span>
                        <i>任务量</i>
                        <el-input
                          placeholder="请输入分配任务量"
                          v-model="item.twoQuarterNumber"
                          clearable
                          :disabled="!item.decompose"
                          size="mini"
                          class="input"
                        ></el-input>
                      </span>
                      <!-- <span>
                        <i>描述</i>
                        <el-input
                          placeholder="请输入内描述,最长50个字符"
                          v-model="item.twoQuarterDescription"
                          show-word-limit
                          clearable
                          size="small"
                          class="input"
                          maxlength="50"
                        >
                        </el-input>
                      </span>-->
                    </li>
                    <li>
                      <b>第三季度</b>
                      <span>
                        <i>任务量</i>
                        <el-input
                          placeholder="请输入分配任务量"
                          v-model="item.threeQuarterNumber"
                          clearable
                          :disabled="!item.decompose"
                          size="mini"
                          class="input"
                        ></el-input>
                      </span>
                      <!-- <span>
                        <i>描述</i>
                        <el-input
                          placeholder="请输入内描述,最长50个字符"
                          v-model="item.threeQuarterDescription"
                          show-word-limit
                          clearable
                          size="small"
                          class="input"
                          maxlength="50"
                        >
                        </el-input>
                      </span>-->
                    </li>
                    <li>
                      <b>全年</b>
                      <span>
                        <i>任务量</i>
                        <el-input
                          placeholder="请输入分配任务量"
                          v-model="item.allNumber"
                          clearable
                          size="mini"
                          class="input"
                        ></el-input>
                      </span>
                      <!-- <span>
                        <i>描述</i>
                        <el-input
                          placeholder="请输入内描述,最长50个字符"
                          v-model="item.allDescription"
                          show-word-limit
                          clearable
                          size="small"
                          class="input"
                          maxlength="50"
                        >
                        </el-input>
                      </span>-->
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: "",
      value: "",
      value2: "",
      textarea: "",
      loading: false,
      loadingTop: false,
      isTrue: false,
      sectionOptions: [],
      departmentProp: {
        label: "name",
        value: "id",
        children: "departments"
      },
      ruleForm: {
        taskId: "", //任务名
        subtasksId: "", //指标名
        number: "", //数量
        subtasksName: "", //指标名称
        departmentId: "", //部门
        completeYear: "", //年
        completeQuarter: "", //季度
        decompose: true, //单选
        delivery: false,
        oneQuarterNumber: "", //第一季度
        twoQuarterNumber: "", //第二季度
        threeQuarterNumber: "", //第三季度
        allNumber: "" //全年季度
      },
      unitSHow: true,
      form: {
        name: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
         subtasksName: [
          { required: true, message: "请输入内容", trigger: "blur" },
        
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      },
      options: [],
      taskList: [], //任务数组
      targetList: [], //指标数组
      departmentList: [], //领导小组
      countyLIstanbul: [], //获取区县数组
      value: "",
      radio: "",
      datalist: [1],
      currIndex: 0,
      year: "", //年
      quarter: "", //季度
      disableds: false,
      quarterList: [
        { label: "第一季度", value: 1 },
        { label: "第二季度", value: 2 },
        { label: "第三季度", value: 3 },
        { label: "第四季度", value: 4 }
      ], //季度数组
      type: true,
      subtaskDeptTasks: [
        {
          type: "", //类型
          departmentId: "", //单位名称id
          subtasksId: this.$route.query.id,
          decompose: true, //是否分解
          // number: "",
          // remarks: "", //备注
          typesList: [], //单位名称数组
          oneQuarterNumber: "", //1分值
          twoQuarterNumber: "", //2分值
          threeQuarterNumber: "", //3分值
          allNumber: "", //4分值
          oneQuarterDescription: "", //1描述
          twoQuarterDescription: "", //2描述
          threeQuarterDescription: "", //3描述
          allDescription: "" //4描述
        }
      ], //数据分配列表
      upID: "",
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      // 拆分子任务
      chaifenZiTask: [
        { targetName: "", number: "", taskId: this.$route.query.parentId }
      ],
      quarterFrom: {
        oneQuarterNumber: "",
        twoQuarterNumber: "",
        threeQuarterNumber: "",
        allNumber: "",
        decompose: false
      }
    };
  },
  mounted() {
    if (this.$route.query.type == "1") {
      this.type = true;
    } else {
      this.type = false;
    }
    this.ruleForm.number = this.$route.query.number;
    this.ruleForm.departmentId = this.$route.query.departmentName;
    this.ruleForm.decompose = this.$route.query.decompose;

    this.getAllDepartment();
    this.getAllDistrict();
    let _this = this;
    // 修改顶部内容值
    if (this.$route.query.upsubtasksId) {
      console.log("1");
      this.loadingTop = true;
      this.upID = this.$route.query.upsubtasksId;
      setTimeout(function() {
        _this.gettopLoad();
      }, 1000);
    }

    if (this.$route.query.id) {
      this.loading = true;
      this.upID = this.$route.query.id;
      let _this = this;
      this.isTrue = true;
      setTimeout(function() {
        _this.getLoad();
      }, 1000);
    }
    this.getdepartmentTypeList();
  },
  methods: {
    // 是否分解到责任单位
    unitQuarter() {
      if (this.unitSHow == false) {
        this.subtaskDeptTasks = [];
      }
    },
    // 顶部 当按钮为不分解时
    dataQuarter() {
      console.log(this.quarterFrom.decompose);
      if (!this.quarterFrom.decompose) {
        this.quarterFrom.oneQuarterNumber = "";
        this.quarterFrom.twoQuarterNumber = "";
        this.quarterFrom.threeQuarterNumber = "";
      }
    },
    // 底部列表 按钮不分解时
    dataQuarterbottom(index) {
      if (!this.subtaskDeptTasks[index].decompose) {
        this.subtaskDeptTasks[index].oneQuarterNumber = "";
        this.subtaskDeptTasks[index].twoQuarterNumber = "";
        this.subtaskDeptTasks[index].threeQuarterNumber = "";
      }
    },
    // 顶部回填
    gettopLoad() {
      let _obj = {
        id: this.upID
      };
      this.$axios
        .post("/distribution/load", _obj)
        .then(res => {
          if (res.code == 200) {
            this.loadingTop = false;
            console.log(res.data);
            let _data = res.data;
            let _this = this.ruleForm;
            _this.subtasksName = _data.targetName;
            if (_data.dismantle == 2) {
              _this.decompose = false;
            } else {
              _this.decompose = true;
            }
            _this.oneQuarterNumber = _data.oneQuarterNumber;
            _this.twoQuarterNumber = _data.twoQuarterNumber;
            _this.threeQuarterNumber = _data.threeQuarterNumber;
            _this.allNumber = _data.allNumber;
            if (_data.subtasks.length > 0) {
              this.chaifenZiTask = _data.subtasks;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 底部回填
    getLoad() {
      let _obj = {
        id: +this.upID
      };
      this.$axios
        .post("/deptTask/loadDecomposeInfo", _obj)
        .then(res => {
          if (res.code == 200) {
            this.loading = false;
            let _data = res.data;
            let _this = this.quarterFrom;
            _this.oneQuarterNumber = _data.oneQuarterNumber;
            _this.twoQuarterNumber = _data.twoQuarterNumber;
            _this.threeQuarterNumber = _data.threeQuarterNumber;
            _this.allNumber = _data.allNumber;
            if (_data.decompose == 1) {
              _this.decompose = true;
            } else {
              _this.decompose = false;
            }
            let _arr = _data.deptTasks;
            for (let i = 0; i < _arr.length; i++) {
              _arr[i].type = _arr[i].departmentTypeId;
              if (_arr[i].decompose == 1) {
                _arr[i].decompose = true;
              } else {
                _arr[i].decompose = false;
              }
              let _list = this.countyLIstanbul;
              _list.forEach(item => {
                if (item.id == _arr[i].type) {
                  _data.deptTasks[i].typesList = item.departments;
                }
              });
            }

            this.sectionOptions.forEach((item, index) => {
              item.departments.forEach((o, i) => {
                if (o.id == _data.departmentId) {
                  this.value = [item.id, o.id];
                }
              });
            });

            this.subtaskDeptTasks = _data.deptTasks;
            this.subtaskDeptTasks.forEach((item, index) => {
              if (item.departmentId == _data.departmentId) {
                this.subtaskDeptTasks.splice(index, 1);
              }
            });
            if (this.subtaskDeptTasks.length != 0) {
              this.unitSHow = true;
              this.disableds = false;
            } else {
              this.unitSHow = false;
              this.disableds = false;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 提交
    setSubmit() {
      let _this = this.ruleForm;
      let _isFlog = false;
      let _obj = {};
      if (this.type) {
        let _decompose = 2;
        if (_this.decompose == true) {
          _decompose = 1;
        }
        if (_this.subtasksName == "") {
          this.$message({
            message: "输入框不能为空",
            type: "warning"
          });
          return;
        }
        _obj = {
          number: _this.number, //指标数量
          targetName: _this.subtasksName, //指标名称
          dismantle: _decompose, //是否分解
          id: this.upID,
          oneQuarterNumber: _this.oneQuarterNumber,
          twoQuarterNumber: _this.twoQuarterNumber,
          threeQuarterNumber: _this.threeQuarterNumber,
          allNumber: _this.allNumber,
          taskId: this.$route.query.parentId
        };
        // 顶部修改的话
        if (this.$route.query.upsubtasksId) {
          console.log(this.chaifenZiTask, "this.chaifenZiTask");
          _obj.subtasks = this.chaifenZiTask;
          this.$axios
            .post("/distribution/update", _obj)
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  message: "数据更新成功",
                  type: "success"
                });
                this.$router.go(-1);
                console.log(res);
              } else {
                this.$message.error(`${res.msg}`);
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          _obj.subtasks = this.chaifenZiTask;
          this.$axios
            .post("/distribution/add", _obj)
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  message: "数据更新成功",
                  type: "success"
                });
                this.$router.go(-1);
              } else {
                this.$message.error(`${res.msg}`);
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      } else {
        // 底部修改
        if (this.$route.query.id) {
          this.subtaskDeptTasks.forEach(item => {
            item.taskId = this.$route.query.parentId;
            item.id = this.$route.query.sektId;
          });

          let obj = {
            taskId: this.$route.query.parentId,
            id: this.$route.query.id,
            oneQuarterNumber: this.quarterFrom.oneQuarterNumber,
            twoQuarterNumber: this.quarterFrom.twoQuarterNumber,
            threeQuarterNumber: this.quarterFrom.threeQuarterNumber,
            allNumber: this.quarterFrom.allNumber,
            decompose: this.quarterFrom.decompose,
            deptTasks: this.subtaskDeptTasks
          };

          if (obj.decompose == false) {
            obj.decompose = 0;
          } else {
            obj.decompose = 1;
          }

          obj.deptTasks.forEach((item, index) => {
            if (item.decompose) {
              item.decompose = 1;
            } else {
              item.decompose = 0;
            }
          });
          if (this.value == "" || this.value.length == 0) {
            this.$message.error("请选择牵头部门,否则无法提交");
            return;
          }
          let _arr = JSON.parse(JSON.stringify(this.value));
          obj.departmentId = _arr.pop();

          this.$axios
            .post("/deptTask/add", obj)
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  message: "数据更新成功",
                  type: "success"
                });
                this.$router.go(-1);
                console.log(res);
              } else {
                this.$message.error(`${res.msg}`);
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          // 底部新增
          // this.subtaskDeptTasks.forEach(item => {
          //   item.taskId = this.$route.query.parentId;
          //   item.subtasksId = this.$route.query.id;
          // });
          let obj = {
            taskId: this.$route.query.parentId,
            id: this.$route.query.id,
            oneQuarterNumber: this.quarterFrom.oneQuarterNumber,
            twoQuarterNumber: this.quarterFrom.twoQuarterNumber,
            threeQuarterNumber: this.quarterFrom.threeQuarterNumber,
            allNumber: this.quarterFrom.allNumber,
            deptTasks: this.subtaskDeptTasks
          };
          this.$axios
            .post("/deptTask/add", obj)
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  message: "数据更新成功",
                  type: "success"
                });
                this.$router.go(-1);
                console.log(res);
              } else {
                this.$message.error(`${res.msg}`);
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      }
    },
    changeFamily1(val) {
      console.log(this.value);
    },
    // 点击是否分解
    dataDecompose() {
      if (this.ruleForm.decompose) {
        this.subtaskDeptTasks = [
          {
            type: "", //类型
            departmentId: "", //单位名称id
            number: "",
            completeYear: "", //截至年
            completeQuarter: "", //截至季度
            remarks: "", //备注
            typesList: [], //单位名称数组
            quarterList: [] //季度数组
          }
        ];
      } else {
        this.subtaskDeptTasks = [];
      }
    },
    getdepartmentTypeList() {
      this.$axios
        .post("dept/getDepartmentTypeList")
        .then(res => {
          if (res.code == 200) {
            this.sectionOptions = [];
            res.data.forEach((item, index) => {
              if (item.id == 1) {
                this.sectionOptions.push(item);
              }
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 必须让输入正整数
    dataNumber(index) {
      this.subtaskDeptTasks[index].number = this.subtaskDeptTasks[
        index
      ].number.replace(/[^\.\d]/g, "");
      this.subtaskDeptTasks[index].number = this.subtaskDeptTasks[
        index
      ].number.replace(".", "");
    },
    // 更新类型选中时的回调
    selectType(index) {
      let _id = this.subtaskDeptTasks[index].type;
      this.subtaskDeptTasks[index].departmentId = "";
      this.subtaskDeptTasks[index].typesList = [];
      this.countyLIstanbul.forEach(item => {
        if (item.id == _id) {
          this.subtaskDeptTasks[index].typesList = item.departments;
        }
      });
    },
    // 获取类型 区县
    getAllDistrict() {
      this.$axios
        .post("/dept/getDepartmentTypeList")
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.countyLIstanbul = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取一级部门
    getAllDepartment() {
      this.$axios
        .post("/dept/getList", "1")
        .then(res => {
          if (res.code == 200) {
            this.departmentList = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 选中任务回调
    selectTask() {
      console.log(this.ruleForm.taskId);
      this.ruleForm.target = "";
      this.taskList.forEach((item, index) => {
        if (item.id == this.ruleForm.taskId) {
          this.targetList = item.tasks;
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 增加数据
    addList() {
      this.subtaskDeptTasks.push({
        type: "", //类型
        departmentId: "", //单位名称id
        subtasksId: this.$route.query.id,
        typesList: [], //单位名称数组
        oneQuarterNumber: "", //1分值
        twoQuarterNumber: "", //2分值
        threeQuarterNumber: "", //3分值
        allNumber: "", //4分值
        oneQuarterDescription: "", //1描述
        twoQuarterDescription: "", //2描述
        threeQuarterDescription: "", //3描述
        allDescription: "" //4描述
      });
      this.currIndex = this.subtaskDeptTasks.length - 1;
    },
    deleteList(index) {
      this.subtaskDeptTasks.splice(index, 1);
    },
    // 接受年
    selectTear(index) {
      console.log(index);
      if (index != undefined && index != null) {
        console.log("erzi");
        this.subtaskDeptTasks[index].completeQuarter = "";
        if (this.subtaskDeptTasks[index].completeYear == this.doHandleYear()) {
          let _Year = this.getQuarterByMonth();
          this.subtaskDeptTasks[index].quarterList = [];
          for (_Year; _Year <= 4; _Year++) {
            this.subtaskDeptTasks[index].quarterList.push(_Year);
          }
        } else {
          this.subtaskDeptTasks[index].quarterList = [1, 2, 3, 4];
        }
      } else {
        this.ruleForm.completeQuarter = "";
        if (this.ruleForm.completeYear == this.doHandleYear()) {
          let _Year = this.getQuarterByMonth();
          this.quarterList = [];
          for (_Year; _Year <= 4; _Year++) {
            this.quarterList.push(_Year);
          }
        } else {
          this.quarterList = [1, 2, 3, 4];
        }
      }
    },
    // 获取当前年份
    doHandleYear() {
      var myDate = new Date();
      var tYear = myDate.getFullYear();
      return tYear;
    },
    // 获取当前季度
    getQuarterByMonth() {
      var today = new Date(); //获取当前时间
      var month = today.getMonth() + 1; //getMonth返回0-11
      //下面是几个if
      if (month >= 1 && month <= 3) {
        return 1;
      } else if (month >= 4 && month <= 6) {
        return 2;
      } else if (month >= 7 && month <= 9) {
        return 3;
      } else {
        return 4;
      }
    },
    // ---------
    addZiTask() {
      let obj = {
        targetName: "",
        number: "",
        taskId: this.$route.query.parentId
      };
      this.chaifenZiTask.push(obj);
    },
    reductZiTask(index) {
      this.chaifenZiTask.splice(index, 1);
    }
  }
};
</script>
<style scoped lang="less">
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.header {
  float: left;
  width: 100%;
  height: 52px;
  text-align: left;
  background: rgb(252, 248, 248);
}
.main {
  width: 100%;
  height: 100%;
  padding-top: 52px;
  /* background: #fff; */
}
.subnav {
  float: left;
  width: 100%;
  min-height: 350px;
  line-height: 60px;
}
.box-card > .text > ul {
  width: 100%;
  height: auto;
}

.list {
  float: left;
  width: 100%;
  height: auto;
  min-height: 400px;
  /* background: red; */
}
.center {
  height: 630px;
}
.focusTop {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
}
.focusTop > b {
  display: inline-block;
  font-size: 14px;
  margin-left: 33px;
}
@media screen and (max-width: 1400px) {
  .center {
    height: 360px;
  }
}
.selectList {
  width: 100%;
  padding-left: 40px;
  padding-top: 20px;
  position: relative;
  // overflow: hidden;
  margin-bottom: 10px;
  border: 1px dashed #dcdfe6;
}

.selectList > i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 18px;
  color: #236ebd;
  font-weight: 600;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.selectList > i:nth-child(2) {
  top: 242px;
}
.selectList > span {
  display: inline-block;
  width: 30%;
  // margin-bottom:20px;
}
.selectList > span.striping {
  position: relative;
  left: 0px;
}
.selectList > span.striping > i {
  position: absolute;
  left: -17px;
  top: 43px;
  width: 10px;
  height: 1px;
  border-top: 1px solid #ccc;
}
.selectList > span > b {
  display: inline-block;
  width: 32%;
  height: 26px;
  line-height: 20px;
  font-size: 14px;
}
.warp_all {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  overflow: hidden;
}
.quarterNum {
  display: flex;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  // overflow: hidden;
  > li {
    // float: left;
    width: 35%;
    box-sizing: border-box;
    > b {
      display: block;
      height: 26px;
      line-height: 20px;
      font-size: 12px;
    }
    > span {
      display: block;
      height: 20px;
      line-height: 20px;
      width: 100%;
      margin-bottom: 20px;
      > i {
        // display: inline-block;
        font-style: normal;
        width: 10%;
        font-size: 12px;
      }
      > .input {
        width: 60%;
      }
    }
  }
}
.icon{
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 18px;
  border-radius: 50%;
  border:1px solid #409EFF;
  color: #409EFF;
  font-size: 12px;
  text-align: center;
  font-style: normal;
}
.remark {
  width: 100%;
  height: auto;
  clear: both;
}
.remark > span {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  font-size: 16px;
}
.remark > input {
  width: 100%;
  height: 80px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.submit {
  width: 100%;
  height: 60px;
  // margin-top: 20px;
  position: fixed;
  bottom: 20px;
}

.parentyear {
  width: 100%;
  .striping > i {
    display: inline-block;
    width: 15px;
    text-align: center;
    font-size: 16px;
    color: #ccc;
  }
  b {
    color: #606266;
    font-size: 14px;
    font-weight: 500;
    margin-right: 8px;
  }
}

/* 组件自带css样式 */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

// .box-card {
//   width: 100%;
// }
// @media screen and (max-width: 1366px) {
//   .selectList > span {
//     width: 240px;
//   }
// }
.el-icon-plus,
.el-icon-minus {
  font-size: 24px;
  cursor: pointer;
  margin-left: 30px;
}
.iconBoxSize {
  width: 1000px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
}
.roofStyle {
  width: 100%;
  height: auto;
  padding: 10px 0;
  background: #fff;
  margin-top: 10px;
}
.segmentation {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #f0f2f5;
  position: relative;
  top: -10px;
}
.segmentation > b {
  display: inline-block;
  font-size: 14px;
}
</style>
<style>
.subnav .el-card__header {
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
}
.list .el-card__header {
  font-size: 16px;
  font-weight: 600;
}
.el-divider__text,
.el-link {
  font-size: 18px;
  font-weight: 600;
}
</style>
